<template>
	<view class="gui-padding">
		<view class="gui-margin-top gui-flex gui-rows gui-space-between gui-align-items-center">
			<text class="gui-h5 gui-color-gray">常用地址</text>
			<view @tap="addAddress" hover-class="gui-tap">
				<text class="gui-block-text gui-primary-color gui-text">+ 添加地址</text>
			</view>
		</view>
		<view class="gui-list gui-margin-top">
			<view class="gui-list-items" v-for="(item,index) in list" :key="item.id" :data-address="item" @tap="gotoAdd">				
				<view class="gui-list-body gui-border-b">
					<view class="gui-list-title">
						<text class="gui-list-title-text gui-primary-color">{{item.name}}</text>
						<text class="gui-list-title-desc gui-color-gray">{{item.phone}}</text>
					</view>
					<text class="gui-list-body-desc gui-color-gray">{{item.province}}-{{item.city}}-{{item.area}}-{{item.address}}</text>
					<text v-if="item.type==1" class="gui-badge gui-badge-absolute gui-bg-primary gui-color-white">默认地址</text>
				</view>
				<text class="gui-list-arrow-right gui-icons gui-color-gray">&#xe601;</text>
				
			</view>	
			
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			list:[]
		}
	},
	onLoad:function(){
		this.$http.request({
			url:'auth.address/get',
			method:'POST',
			data:{},
			withToken:true
		}).then(res=>{
			this.list = res.list 
		}).catch(err=>{
			
		})
	},
	methods: {
		addAddress : function () {
			// 跳转到添加地址页面
			uni.navigateTo({
				url:"../addressAdd/addressAdd"
			})
		},
		gotoAdd:function(e){
			uni.navigateTo({
				url:'../addressAdd/addressAdd?address='+encodeURIComponent(JSON.stringify(e.currentTarget.dataset.address))
			})
		}
	}
}
</script>
<style scoped>
	.gui-list-body{position: relative;}
	.gui-badge{border-radius:38rpx; height:38rpx; line-height:38rpx; padding:0 13rpx; font-size:22rpx;width: 100rpx;text-align: center;}
	.gui-badge-absolute{position:absolute; left:0rpx; top:-8rpx; z-index:1;}
	.gui-badge-point{width:20rpx; height:20rpx; border-radius:12rpx; position:absolute; right:4rpx; top:4rpx; z-index:1; background-color:#FF0000;}
	.gui-badge-gender{width:38rpx; height:38rpx; border-radius:30rpx; text-align:center; font-size:22rpx !important; line-height:38rpx; position:absolute; right:6rpx; top:4rpx; z-index:1;}
</style>